<template>
  <div class="inputDom">
    <input
      :type="inputType"
      :placeholder="placeholder"
      v-model="inputValue"
      @blur="showTips"
      :class="isVal?'success':'error'"
    />
  </div>
</template>

<script>
export default {
  props: ["inputType", "placeholder", "rule", "err_message"],
  data() {
    return {
      inputValue: "",
      isVal: true
    };
  },
  watch: {
    inputValue() {
      const reg = this.rule;
      // const reg = new RegExp(this.rule);
      // console.log(reg.test(this.inputValue));

      if (reg.test(this.inputValue)) {
        this.isVal = true;
      } else {
        this.isVal = false;
      }
      this.$emit("valueChanged", this.inputValue);
    }
  },
  methods: {
    showTips() {
      if (!this.isVal) {
        this.$toast.fail({
          message: this.err_message
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.inputDom {
  padding-bottom: 5vw;
  input {
    width: 100%;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    line-height: 13.333vw;
    font-size: 5vw;
  }
  .error {
    border-color: red;
  }
}
</style>